<template>
  <div @click="closeSlide" class="box">
    <div class="left">
      <el-tabs v-model="activeName" stretch @tab-click="handleClick">
        <el-tab-pane label="标站克里金插值图" name="first">
          <div class="container">
            <div class="top">
              <span style="width: 80px">污染因子：</span>
              <el-select
                v-model="pm"
                style="width: 140px"
                size="medium"
                placeholder="请选择"
              >
                <el-option
                  label="PM₁₀"
                  value="pm10"
                  v-show="changeIndex !== 'minute'"
                ></el-option>
                <el-option
                  label="PM₂.₅"
                  value="pm25"
                  v-show="changeIndex !== 'minute'"
                ></el-option>
                <el-option label="CO" value="co"></el-option>
                <el-option label="NO₂" value="no2"></el-option>
                <el-option label="O₃" value="o3"></el-option>
                <el-option label="SO₂" value="so2"></el-option>
              </el-select>
              <span style="width: 60px; margin-left: 30px">区域：</span>
              <el-select
                v-model="region"
                style="width: 140px"
                size="medium"
                placeholder="请选择"
              >
                <el-option label="济南" value="JnJz"></el-option>
                <el-option label="济南周边" value="JnJz_zb"></el-option>
                <el-option label="全省" value="sd_all"></el-option>
              </el-select>
            </div>
            <div class="top" style="margin-top: 5px">
              <span style="width: 80px">时间颗粒：</span>
              <el-select
                v-model="value"
                @change="onChange"
                style="width: 140px"
                size="medium"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <div v-if="changeIndex == 'hour'" class="selectTime">
                <el-radio-group v-model="radio">
                  <el-radio label="12hour">12小时</el-radio>
                  <el-radio label="24hour">24小时</el-radio>
                  <el-radio label="any_hour">任意时段</el-radio>
                </el-radio-group>
              </div>
              <div v-if="changeIndex == 'minute'" class="selectTime">
                <el-radio-group v-model="minuteRadio">
                  <el-radio label="60minute">1小时</el-radio>
                  <el-radio label="120minute">2小时</el-radio>
                  <el-radio label="any_minute">任意时段</el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- 时间选择 -->
            <div class="middle">
              <span>时段选择：</span>
              <div class="middle_box">
                <el-date-picker
                  :class="$is_dock_env ? 'n-date-picker-class' : ''"
                  :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                  :format="$is_dock_env ? 'yyyy/MM/dd' : ''"
                  v-model="timeSoltValue"
                  v-show="changeIndex == 'day'"
                  type="daterange"
                  :picker-options="pickerDayOptions"
                  range-separator="至"
                  :start-placeholder="momentLastHours"
                  :clearable="false"
                  :end-placeholder="momentLastHours"
                ></el-date-picker>
                <el-date-picker
                  :class="$is_dock_env ? 'n-date-picker-class' : ''"
                  :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                  v-model="timeSoltValue[0]"
                  type="week"
                  :picker-options="pickerDayOptions"
                  v-show="changeIndex == 'week'"
                  :clearable="false"
                  format="yyyy 第 WW 周"
                  placeholder="选择周"
                ></el-date-picker>
                <el-date-picker
                  :class="$is_dock_env ? 'n-date-picker-class' : ''"
                  :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                  :format="$is_dock_env ? 'yyyy-MM' : ''"
                  v-model="timeSoltValue"
                  type="monthrange"
                  :picker-options="pickerDayOptions"
                  v-show="changeIndex == 'month'"
                  :clearable="false"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                ></el-date-picker>
                <el-date-picker
                  :class="$is_dock_env ? 'n-date-picker-class' : ''"
                  :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                  :format="$is_dock_env ? 'yyyy/MM/dd HH:mm' : ''"
                  v-model="timeSoltValue[0]"
                  v-show="
                    changeIndex == 'hour' &&
                    (radio == '12hour' || radio == '24hour')
                  "
                  type="datetime"
                  :clearable="false"
                  :picker-options="pickerDayOptions"
                  placeholder="选择日期时间"
                ></el-date-picker>
                <div v-show="changeIndex == 'hour' && radio == 'any_hour'">
                  <el-date-picker
                    :class="$is_dock_env ? 'n-date-picker-class' : ''"
                    :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                    :format="$is_dock_env ? 'yyyy/MM/dd HH:mm' : ''"
                    v-model="timeSoltValue"
                    :picker-options="pickerDayOptions"
                    type="datetimerange"
                    :clearable="false"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>
                <el-date-picker
                  :class="$is_dock_env ? 'n-date-picker-class' : ''"
                  :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                  :format="$is_dock_env ? 'yyyy/MM/dd HH:mm' : ''"
                  v-model="timeSoltValue[0]"
                  v-show="
                    changeIndex == 'minute' &&
                    (minuteRadio == '60minute' || minuteRadio == '120minute')
                  "
                  type="datetime"
                  :clearable="false"
                  :picker-options="pickerDayOptions"
                  placeholder="选择日期时间"
                ></el-date-picker>
                <el-date-picker
                  :class="$is_dock_env ? 'n-date-picker-class' : ''"
                  :popper-class="$is_dock_env ? 'n-date-popper-class' : ''"
                  :format="$is_dock_env ? 'yyyy/MM/dd HH:mm' : ''"
                  v-model="timeSoltValue"
                  type="datetimerange"
                  :clearable="false"
                  :picker-options="pickerDayOptions"
                  v-show="
                    changeIndex == 'minute' && minuteRadio == 'any_minute'
                  "
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <div style="margin-left: 20px">
                <el-button
                  v-if="isShowConfig"
                  :loading="queryLoading"
                  :disabled="isMinuteDispaly"
                  type="primary"
                  @click="pushNewKring"
                  class="confirm"
                  >查询</el-button
                >
              </div>
            </div>
            <div class="confirm_bottom">
              <el-button
                v-if="!isShowConfig"
                :loading="queryLoading"
                :disabled="isMinuteDispaly"
                type="primary"
                @click="pushNewKring"
                class="confirm"
                >查询</el-button
              >
              <div v-if="isShowConfig">
                <a-select
                  v-model="selectConfigName"
                  placeholder="请选择查询条件"
                  class="main-select"
                  style="width: 180px; margin-top: 10px"
                  @change="selectConfigChange"
                >
                  <a-select-option
                    v-for="item of configTableList"
                    :key="item.id"
                    :value="item.name"
                    >{{ item.name }}
                  </a-select-option>
                </a-select>
                <a-button
                  style="margin-left: 20px"
                  @click="editDialogVisible = true"
                >
                  保存查询条件
                </a-button>
                <a-popover
                  trigger="click"
                  placement="bottomRight"
                  v-model="popoverVisible"
                  overlayClassName="custom-popover-overlay-class"
                >
                  <template slot="title">
                    <div
                      style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                    >
                      查询条件设置<a-icon
                        type="close"
                        @click="popoverVisible = false"
                      />
                    </div>
                  </template>
                  <div slot="content" style="width: 640px">
                    <a-table
                      bordered
                      class="config-table"
                      size="middle"
                      :dataSource="configTableList"
                      :columns="configColumns"
                      rowKey="id"
                      :pagination="false"
                      :scroll="{ y: 400 }"
                    >
                      <template slot="index" slot-scope="text, record, index">
                        {{ index + 1 }}
                      </template>
                      <template slot="name" slot-scope="text, record, index">
                        <div
                          v-if="isConfigEdit && curConfigInfo.id == record.id"
                        >
                          <a-input
                            v-model="curConfigName"
                            style="width: 252px"
                          />
                          <a-icon
                            @click="saveConfigPlan"
                            type="check"
                            class="edit-ok-icon"
                          /><a-icon
                            @click="cancelConfigPlan"
                            type="close"
                            class="edit-cancel-icon"
                          />
                        </div>
                        <div v-else>{{ text }}</div>
                      </template>
                      <template
                        slot="operation"
                        slot-scope="text, record, index"
                      >
                        <a
                          type="link"
                          @click="editConfigPlan(record)"
                          :disabled="isConfigEdit"
                        >
                          编辑
                        </a>
                        <a-popconfirm
                          title="确定删除该查询条件吗？"
                          @confirm="delConfigPlan(record.id)"
                        >
                          <a
                            type="link"
                            :style="{ color: isConfigEdit ? '' : 'red' }"
                            :disabled="isConfigEdit"
                          >
                            删除
                          </a>
                        </a-popconfirm>

                        <a-divider type="vertical"></a-divider>
                        <a
                          type="link"
                          :disabled="index == 0 || isConfigEdit"
                          @click="moveConfigPlan(index, 'up')"
                        >
                          上移
                        </a>
                        <a
                          type="link"
                          :disabled="
                            index == configTableList.length - 1 || isConfigEdit
                          "
                          @click="moveConfigPlan(index, 'down')"
                        >
                          下移
                        </a>
                      </template>
                    </a-table>
                  </div>
                  <a-button
                    icon="setting"
                    type="primary"
                    ghost
                    class="setting-btn"
                  ></a-button>
                </a-popover>
              </div>
              <!-- <el-button @click="generateNewKring" class="confirm2" plain>
                      生成
                          </el-button>-->
              <div class="number">数量：{{ swiperSlides.length }}</div>
            </div>
          </div>
          <div class="kring-img-all" v-if="activeName !== 'second'">
            <div
              class="kring_group"
              @click="toSlide(data['value'])"
              :class="swiperValue == index ? 'active_kring' : ''"
              v-for="(data, index) in swiperSlides"
              :key="index"
            >
              <div
                :class="
                  regionClickQuery == 'JnJz' ? 'img_item' : 'img_item_other'
                "
              >
                <canvas
                  class="canvas-small"
                  :id="'canvas-small-' + data['value']"
                  :key="data['value']"
                  width="135"
                  :height="regionClickQuery == 'JnJz' ? 135 : 110"
                ></canvas>
                <img
                  :src="underGraph"
                  alt
                  width="135"
                  :height="regionClickQuery == 'JnJz' ? 135 : 110"
                />
                <div class="img_index">{{ index + 1 }}</div>
                <div class="time">{{ data.day }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="生成记录" name="second">
                  <div v-if="!activeIndex && activeIndex !== 0">
                  <ul  v-infinite-scroll="recordLoad" class="ul">
                      <li :class="activeIndex == index? 'active': ''"  v-for="(data, index) in recordList" @click="onClick(index)" :key="index">
                          <div class="boxs">
                          <div class="recordListleft">
                              <div class="title">事件名称<span class="ellipsis-style" style="width:100px">{{data.name}}</span></div>
                              <div class="time">开始时间：{{data.start_time.split('T').join(' ')}}</div>
                              <div class="time">结束时间：{{data.end_time.split('T').join(' ')}}</div>
                          </div>
                          <div class="recordListright">
                              <el-progress :stroke-width="10" :percentage="data.progress"></el-progress>
                          </div>
                          </div>
                      </li>
                  </ul>
                  
                  </div>
                  <div v-if="activeIndex || activeIndex === 0">
                      <ul class="ul"  style="height: 80px;">
                          <li class="active">
                              <div class="boxs">
                                  <div class="recordListleft">
                                      <div class="title">记录名称<span  class="ellipsis-style" style="width:150px;">{{recordData.name}}</span></div>
                                      <div class="time">开始时间：{{recordData.start_time.split('T').join(' ')}}</div>
                                      <div class="time">结束时间：{{recordData.end_time.split('T').join(' ')}}</div>
                                  </div>
                                  <div class="recordListright" style="padding-top: 15px;">
                                      <div style="text-align: right;">
                                          <el-button @click="activeIndex = undefined" size="small" round>返回列表</el-button>
                                      </div>
                                      <div class="icon_box">
                                          <i @click="reflesh" class="el-icon-refresh-right"></i>
                                          <el-popconfirm
                                              title="确定要删除吗？"
                                              @onConfirm="onConfirmDelete(recordData.id)"
                                              style="width:13px"
                                              >
                                          <i  slot="reference" class="el-icon-close"></i>
                                          </el-popconfirm>
                                      </div>
                                  </div>
                              </div>
                          </li>
                      </ul>
                      <div class="kring-img-all" v-if="activeName === 'second' && (activeIndex || activeIndex === 0)">
                          <div class="kring_group" @click="toSlide(data['value'])" :class="swiperValue == index? 'active_kring': ''" v-for="(data, index) in swiperSlides" :key="index">
                              <div class="img_item">
                              <canvas
                              class="canvas-small"
                              :id="'canvas-small-' + data['value']"
                              :key="data['value']"
                              width="120"
                              height="120"
                          ></canvas>
                          <img :src="bg_pic" alt=""  width="120" height="120">
                              <div class="img_index">{{index + 1}}</div>
                              <div class="time">{{data.day}}</div>
                              </div>
                          </div>
                      </div>
                  </div>
              </el-tab-pane>-->
        <div v-if="false">
          <el-tab-pane label="已保存事件" name="third">
            <ul v-infinite-scroll="saveLoad" class="ul">
              <li
                :class="saveIndex == index ? 'active' : ''"
                v-for="(data, index) in saveList"
                @click="saveClick(index)"
                :key="index"
              >
                <div class="boxs">
                  <div class="recordListleft" style="width: 300px">
                    <div class="title">
                      事件名称：
                      <span class="ellipsis-style" style="width: 150px">{{
                        data.name
                      }}</span>
                    </div>
                    <div class="time">
                      时间：{{ data.time.split("T").join(" ") }}
                    </div>
                  </div>
                  <!-- <div class="recordListright" style="width: 200px">
                              <div v-if="saveIndex == index" class="icon_box">
                              <el-popconfirm
                                  title="确定要删除吗？"
                                  @onConfirm="onSaveDelete(data.id)"
                                  >
                              <span  slot="reference">删除</span>
                              </el-popconfirm>
                              </div>
                                  </div>-->
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </div>
      </el-tabs>
    </div>
    <!-------------------------------------------------------------- 右侧展示图 ------------------------------------------------------------------->
    <div class="right" :style="{ marginLeft: $is_dock_env ? '0px' : '100px' }">
      <div style="display: flex">
        <div class="header">
          <div class="button_box button" @click="toSlide(swiperValue - 1)">
            <div>
              <i class="el-icon-arrow-left"></i>
            </div>
          </div>
          <div class="bigCanvas">
            <canvas id="bigCanvas" width="702" height="702"></canvas>
            <img id="bg-pic" :src="underGraph" />
          </div>
          <div class="button_box button" @click="toSlide(swiperValue + 1)">
            <div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="color_box">
          <el-tooltip
            effect="dark"
            content="注:请按需点击两侧数值调整参考色带"
            placement="top-start"
          >
            <i class="el-icon-warning" style="font-size: 20px"></i>
          </el-tooltip>
          <div class="color_tap">
            <i @click.stop="maxSelect">{{ colorMax }}</i>
            <canvas id="palatteCanvas" width="16" height="320"></canvas>
            <i @click.stop="minSelect">{{ colorMin }}</i>
          </div>
          <div @click.stop class="color_slide">
            <div
              v-if="minShow"
              style="position: absolute; right: 32px"
              class="slide_item"
            >
              <el-slider
                v-model="colorMin"
                @change="updateCanvas"
                vertical
                :min="1"
                :max="colorMax"
                show-input
                input-size="mini"
                height="260px"
              ></el-slider>
            </div>
            <div
              v-if="maxShow"
              style="position: absolute; right: 32px"
              class="slide_item"
            >
              <el-slider
                v-model="colorMax"
                @change="updateCanvas"
                vertical
                :min="colorMin"
                :max="1400"
                input-size="mini"
                show-input
                height="260px"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>{{ swiperValueLabel }}</div>
        <span>
          <el-link
            type="primary"
            icon="el-icon-full-screen"
            @click="checkDetailsView"
            >查看大图</el-link
          >
        </span>
      </div>
      <div class="underBottom" v-if="swiperSlides.length > 1">
        <div class="slide">
          <div class="slide_item">动态预览</div>
          <i
            @click="videoPlay()"
            v-if="!swiperSwitch"
            class="el-icon-video-play icon_stop"
          ></i>
          <i
            @click="videoStop()"
            v-else
            class="el-icon-video-pause icon_stop"
          ></i>
          <div class="slide_item">
            {{ swiperValue >= 9 ? swiperValue + 1 : "0" + (swiperValue + 1) }}张
          </div>
          <el-slider
            v-model="swiperValue"
            :format-tooltip="val => val + 1"
            @change="toSlide"
            :min="0"
            :max="swiperSlides.length - 1"
            style="width: 180px; margin-left: 16px"
          ></el-slider>
          <div class="slide_item">{{ showMaxNumber }}张</div>
        </div>
        <!-- <div @click="saveEvent" class="save_button">
                  保存事件
              </div>-->
        <!-- <div v-show="activeName === 'first'" class="share"  @click="readyShare()"> -->

        <div class="share" @click="getGif()">
          <el-button type="primary" :loading="loadingGif">下载GIF</el-button>
          <!-- <i class="el-icon-download"></i>
                  <div></div>-->
        </div>
      </div>
    </div>
    <!-- 生成参数弹出框 -->
    <div>
      <el-dialog
        title
        :visible.sync="dialogVisible"
        width="560px"
        :before-close="handleClose"
      >
        <div style="text-align: left">
          <div style="display: flex; align-items: center">
            <span style="width: 80px">时间颗粒：</span>
            <el-select
              v-model="value"
              @change="onChange"
              style="width: 140px"
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <div v-if="changeIndex == 'hour'" style="margin-left: 20px">
              <el-radio-group v-model="radio">
                <el-radio label="12hour">12小时</el-radio>
                <el-radio label="24hour">24小时</el-radio>
                <el-radio label="any_hour">任意时段</el-radio>
              </el-radio-group>
            </div>
            <div v-if="changeIndex == 'minute'" style="margin-left: 20px">
              <el-radio-group v-model="minuteRadio">
                <el-radio label="60minute">1小时</el-radio>
                <el-radio label="120minute">2小时</el-radio>
                <el-radio label="any_minute">任意时段</el-radio>
              </el-radio-group>
            </div>
          </div>
          <!-- 时间选择 -->
          <div class="middle">
            <span>时段选择：</span>
            <div class="middle_box">
              <el-date-picker
                size="small"
                v-model="timeSoltValue"
                v-show="changeIndex == 'day'"
                type="daterange"
                :picker-options="pickerDayOptions"
                range-separator="至"
                :start-placeholder="momentLastHours"
                :end-placeholder="momentLastHours"
              ></el-date-picker>
              <el-date-picker
                size="small"
                v-model="timeSoltValue[0]"
                type="week"
                :picker-options="pickerDayOptions"
                v-show="changeIndex == 'week'"
                format="yyyy 第 WW 周"
                placeholder="选择周"
              ></el-date-picker>
              <el-date-picker
                size="small"
                v-model="timeSoltValue"
                type="monthrange"
                :picker-options="pickerDayOptions"
                v-show="changeIndex == 'month'"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              ></el-date-picker>
              <el-date-picker
                size="small"
                v-model="timeSoltValue[0]"
                v-show="
                  changeIndex == 'hour' &&
                  (radio == '12hour' || radio == '24hour')
                "
                type="datetime"
                :picker-options="pickerDayOptions"
                placeholder="选择日期时间"
              ></el-date-picker>
              <div v-show="changeIndex == 'hour' && radio == 'any_hour'">
                <el-date-picker
                  size="small"
                  v-model="timeSoltValue"
                  :picker-options="pickerDayOptions"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <el-date-picker
                size="small"
                v-model="timeSoltValue[0]"
                v-show="
                  changeIndex == 'minute' &&
                  (minuteRadio == '60minute' || minuteRadio == '120minute')
                "
                type="datetime"
                :picker-options="pickerDayOptions"
                placeholder="选择日期时间"
              ></el-date-picker>
              <el-date-picker
                size="small"
                v-model="timeSoltValue"
                type="datetimerange"
                :picker-options="pickerDayOptions"
                v-show="changeIndex == 'minute' && minuteRadio == 'any_minute'"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </div>
          <div class="middle">
            <span>填写标题：</span>
            <div class="middle_box">
              <el-input
                style="width: 140px"
                size="small"
                v-model="reportName"
                placeholder="为生成记录命名"
              ></el-input>
            </div>
          </div>
          <div class="middle">
            <span>色条极值：</span>
            <div class="middle_box">
              <el-input
                size="small"
                style="width: 140px"
                v-model="reportColorMin"
                placeholder="最小值"
              ></el-input>
              <el-input
                size="small"
                style="width: 140px"
                v-model="reportColorMax"
                placeholder="最大值"
              ></el-input>
            </div>
          </div>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
          style="text-align: center; margin-top: -20px"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="pushGenerateParams"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 生成分享弹出框 -->
    <div>
      <el-dialog title :visible.sync="dialogShare" width="560px">
        <div style="display: flex; align-items: center; margin-left: 80px">
          此次分享的名称：
          <el-input
            size="small"
            style="width: 250px"
            ref="mobileUrl"
            v-model="shapePararms.name"
            placeholder
          >
            <el-button @click="createShareLink" slot="append">更新</el-button>
          </el-input>
        </div>
        <div
          style="display: flex; align-items: center; margin: 20px 0 15px 80px"
        >
          手机端分享地址：
          <el-input
            size="small"
            style="width: 250px"
            ref="mobileUrl"
            v-model="mobileShare"
            placeholder
          >
            <el-button @click="copyUrl('mobileUrl')" slot="append"
              >复制</el-button
            >
          </el-input>
        </div>
        <div
          style="display: flex; align-items: center; margin: 20px 0 15px 80px"
        >
          电脑端分享地址：
          <el-input
            size="small"
            style="width: 250px"
            ref="pcUrl"
            v-model="pcShare"
            placeholder
          >
            <el-button @click="copyUrl('pcUrl')" slot="append">复制</el-button>
          </el-input>
        </div>
      </el-dialog>
    </div>
    <a-modal
      title="保存查询条件分组"
      :visible="editDialogVisible"
      :width="500"
      @cancel="handleCancel"
      dialogClass="custom-modal-class"
      @ok="handleSubmit"
    >
      <div class="add-tip">
        查询条件分组保存后，系统将按照设置的条件进行查询！
      </div>
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        @submit="handleSubmit"
      >
        <a-form-model-item label="查询条件分组名称" prop="name">
          <a-input placeholder="请输入名称" v-model="form.name"> </a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- <el-dialog
          title="添加配置方案"
          :visible.sync="editDialogVisible"
          width="720px"
          destroy-on-close
      >
          <EditConfigPlan action="add" v-if="editDialogVisible" @closeDialog="closeDialog"></EditConfigPlan>
      </el-dialog>
     
      <el-dialog
          title="配置方案列表"
          :visible.sync="listDialogVisible"
          width="1100px"
      >
          <ConfigPlanList v-if="listDialogVisible" @loadEvent="loadConfigPlan"></ConfigPlanList>
      </el-dialog> -->
    <!-- <ToNav></ToNav> -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import axios from 'axios'
import * as api from '@/api/api'
import ToNav from '@/components/ToNav'
import EditConfigPlan from './modules/EditConfigPlan'
import ConfigPlanList from './modules/ConfigPlanList'
import { downloadBlob, getUrlKey, isCheckNumber } from '@/utils/utils'
import { timeOptions, configColumns } from '@/options/option'
import Config from '@/config'
import moment from 'moment'
class GetDayObj {
  constructor(id, year, month, day, hour = '00', minute = '00') {
    this.year = year
    this.month = month
    this.day = day
    this.hour = hour
    this.minute = minute
    this.id = id
  }
}
class GetKring {
  constructor(data, time) {
    this.data = data
    this.time = time
  }
}
export default {
  async mounted() {
    let isShowConfig = getUrlKey('isShowConfig')
    this.isShowConfig = isShowConfig
    if (isShowConfig) {
      await this.getConfigPlanList();
      if (this.configTableList && this.configTableList.length) {
        this.selectConfigName = this.configTableList[0].name;
        this.loadConfigPlan(this.configTableList[0]);
      } else {
        // 默认展示全省、近24小时，PM25数据
        this.region = 'sd_all'
        this.radio = '24hour'
        this.pm = 'pm25'
      }
    } else {
      let pm = getUrlKey('pm')
      if (pm) {
        this.pm = pm
      }
    }
    this.initPage()
  },
  computed: {
    ...mapState(["userName"]),
    showMaxNumber() {
      if (this.swiperSlides.length < 10) {
        return '0' + this.swiperSlides.length
      } else {
        return this.swiperSlides.length
      }
    },
    momentLastHours() {
      return this.$moment()
        .subtract(1, 'days')
        .format('YYYY-MM-DD')
    },
    options() {
      if (this.region == 'JnJz_zb') {
        return this.timeOptions.filter(x => x.value == 'hour')
      } else if (this.region == 'sd_all') {
        return this.timeOptions.filter(x => ['hour', 'day', 'month'].includes(x.value))
      }
      return this.timeOptions
    }
  },
  components: {
    ToNav,
    EditConfigPlan,
    ConfigPlanList
  },
  watch: {
    async popoverVisible(val) {
      if (val) {
        this.getConfigPlanList();
      } else {
        try {
          await api.updateConfigPlanSort(
            this.configTableList.map((x) => ({ id: x.id, sort: x.sort }))
          );
        } catch (error) {
          console.log(error);
        }
      }
    },
    timeSoltValue: {
      deep: true,
      handler() {
        console.log('timeSoltValue', this.timeSoltValue);

        // 分钟级数据在2022-05-10 18:15之后才有
        if (this.changeIndex == 'minute') {
          this.isMinuteDispaly = false
          if (this.$moment(this.timeSoltValue[0]).isBefore(this.$moment('2022-05-10 18:15'))) {
            this.isMinuteDispaly = true
          }
        }
      }
    },
    minuteRadio() {
      if (this.minuteRadio == '120minute') {
        // 改变开始时间与结束时间
        let nowTime = this.$moment()
        let startTime = this.timeSoltValue[0]
        let endTime = this.timeSoltValue[1]
        startTime = nowTime.clone()
          .subtract(2, 'hours')
          .subtract(20, 'minutes')
          .format('YYYY-MM-DD HH:mm:00')
        endTime = nowTime.clone()
          .subtract(20, 'minutes')
          .format('YYYY-MM-DD HH:mm:00')
        this.timeSoltValue = [startTime, endTime]
      }
      if (this.minuteRadio == '60minute') {
        // 改变开始时间与结束时间
        let nowTime = this.$moment()
        let startTime = this.timeSoltValue[0]
        let endTime = this.timeSoltValue[1]
        startTime = nowTime.clone()
          .subtract(1, 'hours')
          .subtract(20, 'minutes')
          .format('YYYY-MM-DD HH:mm:00')
        endTime = nowTime.clone()
          .subtract(20, 'minutes')
          .format('YYYY-MM-DD HH:mm:00')
        this.timeSoltValue = [startTime, endTime]
      }
      if (this.minuteRadio == 'any_minute') {
        // 改变开始时间与结束时间
        let nowTime = this.$moment()
        let startTime = this.timeSoltValue[0]
        let endTime = this.timeSoltValue[1]
        startTime = nowTime.clone()
          .subtract(1, 'hours')
          .subtract(20, 'minutes')
          .format('YYYY-MM-DD HH:mm:00')
        endTime = nowTime.clone()
          .subtract(20, 'minutes')
          .format('YYYY-MM-DD HH:mm:00')
        this.timeSoltValue = [startTime, endTime]
      }
    },
    region() {
      if (this.region == 'JnJz_zb') {
        if (this.changeIndex !== 'hour') {
          this.value = 'hour'
          this.changeIndex = 'hour'
        }
      } else if (this.region == 'sd_all') {
        if (!['hour', 'day', 'month'].includes(this.changeIndex)) {
          this.value = 'hour'
          this.changeIndex = 'hour'
        }
      }
    }
  },
  data() {
    return {
      configColumns,
      configTableList: [],
      selectConfigName: undefined,
      configLoading: false,
      popoverVisible: false,
      isConfigEdit: false,
      curConfigInfo: {},
      curConfigName: "",
      form: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
      },
      isShowConfig: false,
      editDialogVisible: false,
      listDialogVisible: false,
      timeSoltValue: [
        // 时间段
        this.$moment()
          .subtract(1, 'days')
          .format('YYYY-MM-DD HH:00:00'),
        this.$moment()
          .subtract(1, 'hours')
          .format('YYYY-MM-DD HH:00:00')
      ],
      pm: 'pm10', // 污染因子
      region: 'JnJz', // 区域：济南街镇 JnJz 济南街镇及其周边JnJz_zb 全省sd_all
      regionClickQuery: 'JnJz',
      underGraph: this.bg_pic,
      bg_pic: require('@/assets/bg/bg_jnjz_6000_6.png'),
      bg_zb_pic: require('@/assets/bg/bg_jnjz_zb_clip.png'),
      bg_sd_pic: require('@/assets/bg/bg_sd.png'),
      width: '', // 数据中canvas的宽度
      height: '', // 数据中canvas的高度
      ret: '', // 总数居
      changeIndex: 'hour', // 获取到时间颗粒具体属性
      activeName: 'first', // 默认选中tabs标签栏
      value: 'hour', // 时间颗粒的选择默认值
      granularityValue: '', // 任意时间段的时间颗粒度
      value1: '', // 日选择默认值
      weekValue: '', // 周选择默认值
      monthValue: '', // 月选择默认值
      radio: '24hour', // 单选框默认值
      endTime: '',
      minShow: false, // 最小值滑块显示
      maxShow: false, // 最大值滑块显示
      hourSelect: '', // 小时选择默认值
      hourScoped: '', // 小时选择范围
      minuteRadio: '60minute', // 分钟选择默认值
      minuteSelect: '', // 分钟选择->具体小时内
      minuteScoped: '', // 分钟选择->范围型选择
      activeIndex: null, // 生成记录滑动改变样式
      saveIndex: null, // 保存时改变样式
      colorMin: 1, // 滑块最小值
      colorMax: 700, // 滑块最大值
      savePage: 0, // 保存滚动加载控制状态
      saveList: [], // 保存时的数据
      loading: false, // 保存时滚动加载控制
      recordLoading: false, // 生成记录滚动加载控制
      recordPage: 0, // 记录的页码
      swiperSwitch: false, // 播放控制
      timer: '', // 自动播放定时器存储变量
      swiperSlides: [], // kring图片数据列表
      swiperValue: 0, // 当前大图显示的图片数据位置
      swiperValueAddr: '', // 当前插值图远程地址
      swiperValueLabel: '', // 当前插值图label
      canvasCsvData: null, // 当前插值图的数据
      recordList: [], // 生成记录列表
      recordData: null, // 生成记录
      time: [], // 时间存储单元
      timeAll: [],
      palette: '', // 颜色收集器
      calcColor: false, // 是否自动计算颜色
      dialogVisible: false, // 控制对话框
      dialogShare: false, // 分享的对话框
      mobileShare: '', // 手机端分享地址
      pcShare: '', // 电脑端分享地址
      reportName: '', // 生成记录名称
      reportColorMin: 1, // 生成记录色条最小值
      reportColorMax: 700, // 生成记录色条最大值
      loadingGif: false,
      queryLoading: false,
      isMinuteDispaly: false,
      shapePararms: {
        picType: '',
        startTime: '',
        endTime: '',
        name: '',
        shapeTime: '',
        loadDataId: -1
      },
      // oss 基础url
      ossBaseUrl:
        this.$is_dock_env ? '/nuofang-wz-api/panorama0/interpolation_graph/pic/' : '//panorama0.novaecs.com/interpolation_graph/pic/',
      month: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: ''
      }, // 月图查看
      pickerDayOptions: {
        firstDayOfWeek: 1,
        // disabledDate: time => {
        //     let t = this.$moment(time)
        //     // 20220413 如果大于35分钟则 显示当前小时的 图片 http://zentao.novaecs.com/biz/story-view-2082-1-project-454.html
        //     let now = this.$moment()
        //     switch (this.value) {
        //         case 'day':
        //             return t >= now.startOf('day')
        //         case 'week':
        //             return t >= now.startOf('isoWeek')
        //         case 'month':
        //             return t >= now.startOf('month')
        //     }
        //     return t > now
        // }
      },
      timeOptions,
      emptyImg:
        ''
    }
  },

  methods: {
    selectConfigChange(val) {
      const info = this.configTableList.find((x) => x.name == val);
      this.loadConfigPlan(info);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const curInfo = this.configTableList.find(
              (c) => c.name == this.form.name
            );
            if (curInfo) {
              this.$message.warning(
                `已存在名称为${this.curConfigName}的查询条件，请修改名称！`
              );
              return;
            }
            let params = {
              name: this.form.name,
              config_info: {
                region: this.region,
                data_type: this.pm,
                time_type: this.value,
                period_type: this.changeIndex == 'hour' ? this.radio : this.changeIndex == 'minute' ? this.minuteRadio : '',
                period_range: [this.$moment(this.timeSoltValue[0]).format("YYYY-MM-DD HH:mm:00"), this.$moment(this.timeSoltValue[1]).format("YYYY-MM-DD HH:mm:00")],
                color_min: this.colorMin,
                color_max: this.colorMax,
              },
              is_prior: false,
              user: this.userName,
              time: this.$moment().format('YYYY-MM-DD HH:mm:ss')
            }
            await api.saveConfigPlan(params);
            this.editDialogVisible = false;
            await this.getConfigPlanList();
            this.selectConfigName = this.form.name;
            this.form.name = "";
            this.pushNewKring();

            // this.$message.success("保存成功");
          } catch (error) {
            this.editDialogVisible = false;
            this.$message.error("保存失败");
            console.log(error);
          }
        }
      });
    },
    handleCancel() {
      this.form.name = "";
      this.editDialogVisible = false;
    },
    moveConfigPlan(index, direction) {
      if (direction === "up" && index > 0) {
        const preSort = this.configTableList[index - 1].sort;
        const curSort = this.configTableList[index].sort;
        this.configTableList[index - 1].sort = curSort;
        this.configTableList[index].sort = preSort;
      } else if (
        direction === "down" &&
        index < this.configTableList.length - 1
      ) {
        const nextSort = this.configTableList[index + 1].sort;
        const curSort = this.configTableList[index].sort;
        this.configTableList[index + 1].sort = curSort;
        this.configTableList[index].sort = nextSort;
      }
      this.configTableList = _.orderBy(
        this.configTableList,
        ["sort"],
        ["desc"]
      );
    },
    delConfigPlan(id) {
      api.delConfigPlan(id)
        .then(async () => {
          this.$message.success("删除成功");
          await this.getConfigPlanList();
          if (this.configTableList.length) {
            this.selectConfigName = this.configTableList[0].name;
            this.loadConfigPlan(this.configTableList[0]);
          } else {
            this.loadConfigPlan({
              config_info: {
                region: "sd_all",
                data_type: "pm25",
                time_type: "hour",
                period_type: "24hour",
                period_range: [
                  this.$moment().subtract(1, 'days').format('YYYY-MM-DD HH:00:00'),
                  this.$moment().subtract(1, 'hours').format('YYYY-MM-DD HH:00:00')
                ],
                color_min: 1,
                color_max: 700
              }
            });
            this.selectConfigName = undefined;
            this.popoverVisible = false
          }
        })
        .catch((error) => {
          this.$message.warning("删除失败");
        });
    },
    async saveConfigPlan() {
      try {
        const curInfo = this.configTableList.find(
          (c) => c.name == this.curConfigName && this.curConfigInfo.id != c.id
        );
        if (curInfo) {
          this.$message.warning(
            `已存在名称为${this.curConfigName}的查询条件，请修改名称！`
          );
          return;
        }
        let params = {
          id: this.curConfigInfo.id,
          name: this.curConfigName,
          config_info: this.curConfigInfo.config_info,
          is_prior: false,
          user: this.userName,
          time: moment().format("YYYY-MM-DD HH:mm:ss"),
          is_remove: false,
          sort: this.curConfigInfo.sort,
        };
        await api.saveConfigPlan(params);
        this.curConfigInfo.name = this.curConfigName;
        this.selectConfigName = this.curConfigInfo.name;
        this.curConfigName = "";
        this.isConfigEdit = false;
        // this.$message.success("保存成功");
      } catch (error) {
        this.$message.error("保存失败");
        console.log(error);
      }
    },
    cancelConfigPlan() {
      this.curConfigInfo = {};
      this.curConfigName = "";
      this.isConfigEdit = false;
    },
    editConfigPlan(row) {
      this.curConfigInfo = row;
      this.curConfigName = row.name;
      this.isConfigEdit = true;
    },
    async getConfigPlanList() {
      this.configLoading = true;
      try {
        let res = await api.getConfigPlans();
        this.configTableList = res.data.data;
        this.configLoading = false;
      } catch (error) {
        console.log(error);
        this.configTableList = [];
        this.configLoading = false;
      }
    },
    loadConfigPlan(row) {
      this.region = row.config_info.region
      if (row.config_info.time_type == 'minute') {
        this.minuteRadio = row.config_info.period_type
      } else if (row.config_info.time_type == 'hour') {
        this.radio = row.config_info.period_type
      }
      this.pm = row.config_info.data_type
      this.value = row.config_info.time_type
      this.changeIndex = this.value
      const period_range = row.config_info.period_range
      this.timeSoltValue = [this.$moment(period_range[0]), this.$moment(period_range[1])]
      this.colorMin = isCheckNumber(row.config_info.color_min) ? row.config_info.color_min : 1
      this.colorMax = isCheckNumber(row.config_info.color_max) ? row.config_info.color_max : 700
      this.pushNewKring()
    },
    closeDialog(v) {
      this.editDialogVisible = v
    },
    initPage() {
      let nowM = this.$moment().minute()
      if (nowM >= 35 && !this.isShowConfig) {
        this.timeSoltValue = [
          // 时间段
          this.$moment()
            .subtract(1, 'days')
            .add(1, 'hours')
            .format('YYYY-MM-DD HH:00:00'),
          this.$moment().format('YYYY-MM-DD HH:00:00')
        ]
      }
      this.initCanvas()
      this.initPageData()
    },
    initPageData() {
      this.getSortTimeList()
    },
    // 初始化
    initCanvas() {
      this.canvas = document.getElementById('bigCanvas')
      this.context = this.canvas.getContext('2d')
      this.paletteD = this.createPalette()
      this.context.globalCompositeOperation = 'destination-over'
      // this.toSlide(0)
    },
    createShareLink() {
      let shapeParams = this.shapePararms
      let params = {
        pic_type: shapeParams.picType,
        shape_name: shapeParams.name,
        shape_time: shapeParams.shapeTime,
        start_time: this.$moment(shapeParams.startTime).format(
          'YYYY-MM-DD HH:mm:00'
        ),
        end_time: this.$moment(shapeParams.endTime).format(
          'YYYY-MM-DD HH:mm:00'
        ),
        color_max: this.colorMax,
        color_min: this.colorMin,
        load_data_id: shapeParams.loadDataId
      }
      console.log('createShareLink -> params', params)

      let pcUrl = this.$router.resolve({
        path: 'KringShare',
        query: params
      })
      let mobileUrl = this.$router.resolve({
        path: 'KringShareMobile',
        query: params
      })
      let base = window.location.href.split('#')[0]
      // PC端分享地址
      this.pcShare = base + pcUrl.href
      // 手机端分享地址
      this.mobileShare = base + mobileUrl.href
    },
    readyShare() {
      // 分享页面
      let picType = ''
      let startTime = ''
      let endTime = ''
      let name = ''
      let shapeTime = ''
      this.shapePararms.loadDataId = -1
      switch (this.activeName) {
        case 'second':
          let loadData = this.recordData
          startTime = loadData.start_time
          endTime = loadData.end_time
          picType = loadData.type
            ; (name = loadData.name),
              (shapeTime = loadData.create_time.split('T').join(' '))
          this.shapePararms.loadDataId = loadData.id
          break
        case 'first':
          let sortTime = this.getSortTime()
          startTime = sortTime[0]
          shapeTime = startTime
          endTime = sortTime[1]
          picType = this.changeIndex
          for (let d of this.options) {
            if (d.value === picType) {
              name = d.label
              break
            }
          }
          break
      }
      this.shapePararms.picType = picType
      this.shapePararms.startTime = startTime
      this.shapePararms.endTime = endTime
      this.shapePararms.name = name
      this.shapePararms.shapeTime = shapeTime
      this.createShareLink()
      this.dialogShare = true
    },
    // 复制URL
    copyUrl(doc) {
      for (let name in this.$refs) {
        if (name === doc) {
          let ref = this.$refs[name]
          ref.select()
          document.execCommand('Copy') // 执行浏览器复制命令
          break
        }
      }
      this.$message({
        showClose: true,
        message: '复制成功',
        type: 'success'
      })
    },
    isPushParamsReady() {
      let sortTime = this.getSortTime()
      let params = null
      let msg = ''
      if (
        !!sortTime[0] &&
        !!this.changeIndex &&
        !!sortTime[1] &&
        !!this.reportName &&
        !!this.reportColorMax &&
        !!this.reportColorMin
      ) {
        // 检测时间范围是否超出限制
        let diffTime = 0
        let end = this.$moment(sortTime[1])
        let start = this.$moment(sortTime[0])
        switch (this.changeIndex) {
          case 'minute':
            diffTime = end.diff(start, 'minute')
            console.log(diffTime);
            if (diffTime > 121) {
              msg = '分钟选择超过120分钟上限 请重新选择时间'
            }
            break
          case 'hour':
            diffTime = end.diff(start, 'hour')
            console.log(diffTime);
            if (diffTime > 121) {
              msg = '小时选择超过120小时上限 请重新选择时间'
            }
            break
          case 'day':
            diffTime = end.diff(start, 'day')
            if (diffTime > 121) {
              msg = '天选择超过120天上限 请重新选择时间'
            }
            break
          case 'week':
            break
          case 'month':
            diffTime = end.diff(start, 'month')
            if (diffTime > 121) {
              msg = '天选择超过120月上限 请重新选择时间'
            }
            break
        }
      } else {
        msg = '有选项未填写 请填写完成后确定'
      }
      if (msg === '') {
        params = {
          pic_type: this.changeIndex,
          start_time: this.$moment(sortTime[0]).format(
            'YYYY-MM-DD HH:mm:00'
          ),
          end_time: this.$moment(sortTime[1]).format(
            'YYYY-MM-DD HH:mm:00'
          ),
          name: this.reportName,
          color_max: this.reportColorMax,
          color_min: this.reportColorMin
        }
      }
      return [params, msg]
    },
    pushGenerateParams() {
      // 提交生成数据的参数
      let [params, msg] = this.isPushParamsReady()
      if (params === null) {
        this.$message({
          message: msg,
          type: 'warning',
          showClose: true
        })
        return
      }
      api.PostCreateKringRcords(params)
        .then(res => {
          console.log('pushGenerateParams -> res', res)
          this.$alert(
            '<div style="text-align: center;">' +
            '<i style="font-size: 72px; color: rgba(54, 198, 38, 1);" class="el-icon-success"></i>' +
            '<div style="padding: 10px; font-size: 24px;font-weight:500;">提交成功</div>' +
            '<div style="color:rgba(0,0,0,0.45);font-weight:400;font-size:14px;">请在“生成记录”中查看进度</div></div>',
            '',
            {
              dangerouslyUseHTMLString: true,
              center: true
            }
          )
          this.dialogVisible = false
        })
        .catch(err => {
          console.log('pushGenerateParams -> err', err)
          this.$message({
            message: '生成数据异常',
            type: 'error',
            showClose: true
          })
        })
    },
    handleClose(done) {
      // 关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // tab切换回调
    handleClick(value) {
      let name = value.name
      if (name === 'first') {
        this.getSortTimeList()
        this.activeIndex = undefined
      }
      if (name === 'second') {
        console.log('handleClick -> value', value)
        this.postRecord(1)
      }
    },
    /**
     * 时间颗粒选择方法
    赋值给changeindex来进行判断
    **/
    onChange(e) {
      console.log(e)
      // 改变开始时间与结束时间
      let nowTime = this.$moment()
      let startTime = this.timeSoltValue[0]
      let endTime = this.timeSoltValue[1]
      switch (e) {
        case 'minute':
          if (this.pm == 'pm10' || this.pm == 'pm25') {
            this.pm = 'co'
          }
          startTime = nowTime.clone()
            .subtract(1, 'hours')
            .subtract(20, 'minutes')
            .format('YYYY-MM-DD HH:mm:00')
          endTime = nowTime.clone()
            .subtract(20, 'minutes')
            .format('YYYY-MM-DD HH:mm:00')
          break
        case 'hour':
          startTime = nowTime
            .subtract(1, 'days')
            .subtract(1, 'hours')
            .format('YYYY-MM-DD HH:00:00')
          break
        case 'day':
          startTime = nowTime
            .subtract(1, 'days')
            .format('YYYY-MM-DD 00:00:00')
          endTime = startTime
          break
        case 'week':
          startTime = nowTime
            .subtract(7, 'days')
            .startOf('isoWeek')
            .format('YYYY-MM-DD 00:00:00')
          break
        case 'month':
          startTime = nowTime
            .subtract(1, 'months')
            .startOf('month')
            .format('YYYY-MM-01 00:00:00')
          endTime = nowTime
            .startOf('month')
            .format('YYYY-MM-01 00:00:00')
          break
      }

      this.changeIndex = e


      this.timeSoltValue = [startTime, endTime]
    },
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`
    },
    // 鼠标移动事件出现删除和刷新
    onClick(index) {
      console.log('onClick -> index', index)
      this.activeIndex = index
      this.recordData = this.recordList[index]
      this.getSortTimeLoadDataList(this.recordData)
      // console.log(this.activeIndex)
    },
    // 删除事件
    onConfirmDelete(index) {
      const run = async () => {
        const data = await this.$request(
          `/kring_pic/del_record?id=${index}`
        )
        if (data.status == 200) {
          this.recordList = this.recordList.filter(
            item => item.id != index
          )
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }
      }
      run()
    },
    // 刷新事件
    reflesh() {
      this.recordList = ''
    },
    // 保存时点击改变样式
    saveClick(index) {
      this.saveIndex = index
    },
    // 保存删除
    onSaveDelete(index) {
      const fun = async () => {
        const data = await this.$get(`/manage/del_plan/?id=${index}`)
        if (data.status == 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.saveList = this.saveList.filter(
            item => item.id != index
          )
        }
      }
      fun()
    },
    // 显示最小滑块
    minSelect() {
      this.minShow = true
      this.maxShow = false
    },
    // 显示最大滑块
    maxSelect() {
      this.maxShow = true
      this.minShow = false
    },
    // 全局点击关闭滑块显示
    closeSlide() {
      this.minShow = false
      this.maxShow = false
    },
    // 发送生成记录的ajax
    postRecord(page) {
      if (this.recordLoading && page !== 1) {
        return
      }
      this.recordLoading = true
      let params = {
        page: page,
        size: 10
      }
      api.GetKringRcords(params).then(res => {
        let data = res.data.data
        if (data.length == 0) {
          this.recordLoading = true
          return
        }
        if (data.length < 10 && data.length != 0) {
          this.recordLoading = true
        } else {
          this.recordLoading = false
        }
        this.recordPage = page
        if (page === 1) {
          this.recordList = data
        } else {
          this.recordList = [...this.recordList, ...data]
        }
      })
    },
    // 发送ajax->已保存事件的ajax
    postAjax(page) {
      if (this.loading) {
        return
      }
      let params = {
        page: page,
        size: 9
      }
      this.loading = true
      api.GetManagePlans(params).then(res => {
        let data = res.data.data
        if (data.length == 0) {
          this.loading = false
          return
        }

        if (data.length < 9 && data.length != 0) {
          this.loading = true
        } else {
          this.loading = false
        }
        this.savePage = page
        this.saveList = [...this.saveList, ...data]
      })
    },
    // 保存滚动加载
    saveLoad() {
      this.postAjax(this.savePage + 1)
    },
    // 生成记录加载
    recordLoad() {
      this.postRecord(this.recordPage + 1)
    },
    getGif() {
      // bg_pic
      let datas = []
      for (let i = 0; i < this.swiperSlides.length; ++i) {
        let data = document
          .getElementById('canvas-small-' + i)
          .toDataURL('image/png')
        // console.log("data", data)
        // let canvas = document.getElementById('canvas-small-' + i)
        // console.log(canvas.width);
        // console.log(canvas.height);
        // let ctx = canvas.getContext('2d')
        // ctx.font = "6px Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif"
        // // ctx.font = "normal small-caps normal 5px arial"
        // ctx.fillStyle="#ffffff"
        // // ctx.globalAlpha=0.0
        // ctx.fillRect(5,5,10,10)
        // ctx.fillStyle = "#000000"
        // // ctx.globalAlpha=1.0
        // ctx.fillText(i, 10, 10)
        // // ctx.font = "6px sans-serif"
        // ctx.fillStyle="#ffffff"
        // ctx.fillRect(10,110,100,10)
        // ctx.textAlign = "center"
        // ctx.fillStyle = "#000000"
        // // ctx.globalAlpha=1.0
        // ctx.fillText(this.swiperSlides[i]['label'], 60, 118);
        // let data = canvas.toDataURL('image/png')
        // console.log(data)
        if (data === this.emptyImg) {
          continue
        }
        datas.push([data, this.swiperSlides[i]['label']])
      }
      this.loadingGif = true
      api.getGif({ datas, region: this.region })
        .then(res => {
          //
          let data = res.data
          if (!!data && data.status === 200) {
            let url =
              Config.URL_KRING_MANAGE +
              'manage/download_gif/?gif_path=' +
              data['gif_path']
            fetch(url)
              .then(res => res.blob())
              .then(blob => {
                // 将链接地址字符内容转变成blob地址
                downloadBlob(blob, '克里金插值图.gif')
                this.loadingGif = false
              })
              .catch(err => {
                this.$message({
                  type: 'error',
                  message: '下载GIF图失败'
                })
                this.loadingGif = false
              })
          } else {
            this.$message({
              type: 'error',
              message: '下载GIF图失败'
            })
            this.loadingGif = false
          }
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: '下载GIF图失败'
          })
          this.loadingGif = false
        })
    },
    getSortTime() {
      let startTime = this.$moment(this.timeSoltValue[0]).format(
        'YYYY-MM-DD HH:mm:00'
      )
      let endTime = this.$moment(this.timeSoltValue[1]).format(
        'YYYY-MM-DD HH:mm:00'
      )
      let timeType = this.changeIndex
      let minuteType = this.minuteRadio
      let hourType = this.radio
      let sTime = startTime
      let eTime = endTime
      switch (this.changeIndex) {
        case 'minute':
          // 分钟粒度
          if (minuteType === '60minute') {
            // 60分钟图
            eTime = this.$moment(startTime)
              .add(59, 'minutes')
              .format('YYYY-MM-DD HH:mm:00')
            break
          }
          if (minuteType === '120minute') {
            // 60分钟图
            eTime = this.$moment(startTime)
              .add(119, 'minutes')
              .format('YYYY-MM-DD HH:mm:00')
            break
          }
          if (minuteType === 'div_minute') {
            // 自定义分钟
            break
          }
          break
        case 'hour':
          // 小时粒度
          if (hourType === '12hour') {
            // 12小时图
            eTime = this.$moment(startTime)
              .add(11, 'hours')
              .format('YYYY-MM-DD HH:00:00')
            break
          }
          if (hourType === '24hour') {
            // 24小时图
            eTime = this.$moment(startTime)
              .add(23, 'hours')
              .format('YYYY-MM-DD HH:00:00')
            break
          }
          if (hourType === 'div_hour') {
            // 小时自定义
            break
          }
          break
        case 'day':
          // 天粒度
          sTime = this.$moment(startTime).format(
            'YYYY-MM-DD 00:00:00'
          )
          eTime = this.$moment(endTime).format('YYYY-MM-DD 00:00:00')
          break
        case 'week':
          // 周粒度
          sTime = this.$moment(startTime)
            .startOf('isoWeek')
            .format('YYYY-MM-DD 00:00:00')
          eTime = this.$moment(startTime)
            .isoWeekday(7)
            .format('YYYY-MM-DD 00:00:00')
          break
        case 'month':
          // 月粒度
          break
      }
      // 20220413 如果大于35分钟则 显示当前小时的 图片 http://zentao.novaecs.com/biz/story-view-2082-1-project-454.html
      let nowM = this.$moment().minute()
      if (this.$moment(eTime) > this.$moment() && this.changeIndex !== 'minute') {
        if (nowM >= 35) {
          eTime = this.$moment().format('YYYY-MM-DD HH:00:00')
        } else {
          eTime = this.$moment()
            .subtract(1, 'hours')
            .format('YYYY-MM-DD HH:00:00')
        }
      }
      let sortTime = [sTime, eTime]
      return sortTime
    },
    getTimeLabelFormat(type) {
      let label = 'YYYY-MM-DD HH:mm:00'
      switch (type) {
        case 'minutes':
          label = 'YYYY-MM-DD HH:mm:00'
        case 'hours':
          label = 'YYYY-MM-DD HH:00:00'
          break
        case 'days':
          label = 'YYYY-MM-DD'
          break
        case 'weeks':
          label = '第 w 周'
          break
        case 'months':
          label = 'YYYY-MM'
          break
      }
      return label
    },
    // 检测时间范围是否超出限制
    checkTimeRangeLimit(sortTime) {
      let res = {
        status: true,
        msg: ''
      }
      let diffTime = 0
      let start = this.$moment(sortTime[0])
      let end = this.$moment(sortTime[1])
      if (!!sortTime[0] && !!this.changeIndex && !!sortTime[1]) {
        switch (this.changeIndex) {
          case 'minute':
            diffTime = end.diff(start, 'minute')
            console.log(diffTime);
            if (diffTime > 121) {
              res['status'] = false
              res['msg'] = '分钟选择超过120分钟上限 请重新选择时间'
            }
            break
          case 'hour':
            diffTime = end.diff(start, 'hour')
            console.log(diffTime);
            if (diffTime > 121) {
              res['status'] = false
              res['msg'] = '小时选择超过120小时上限 请重新选择时间'
            }
            break
          case 'day':
            diffTime = end.diff(start, 'day')
            if (diffTime > 121) {
              res['status'] = false
              res['msg'] = '天选择超过120天上限 请重新选择时间'
            }
            break
          case 'week':
            break
          case 'month':
            diffTime = end.diff(start, 'month')
            if (diffTime > 121) {
              res['status'] = false
              res['msg'] = '天选择超过120月上限 请重新选择时间'
            }
            break
        }
      }
      return res
    },
    getSwiperSlidesList() {
      let sortTime = this.getSortTime()
      // let checkTimeLimit = this.checkTimeRangeLimit(sortTime)
      // if (!checkTimeLimit.status) {
      //     this.$message({
      //         message: checkTimeLimit.msg,
      //         type: 'warning',
      //         showClose: true
      //     })
      //     return []
      // }
      let startTime = this.$moment(sortTime[0])
      let endTime = this.$moment(sortTime[1])
      let interval = this.changeIndex + 's'
      // let picType = ""
      // if(this.changeIndex !== "hour"){
      //     picType = '_' + this.changeIndex
      // }
      console.log(this.changeIndex);
      let picType = ''
      let nowTime = this.$moment()
      if (this.changeIndex == 'minute') {
        if (this.$moment(endTime).isSameOrAfter(nowTime.clone().subtract(20, 'minutes'))) {
          endTime = nowTime.clone().subtract(20, 'minutes')
        }
        picType = '_5min'
      } else if (this.changeIndex == 'hour') {
        if (this.region == 'JnJz') {
          if (this.$moment(endTime).isSameOrAfter(nowTime.clone().subtract(1, 'hours').subtract(7, 'minutes'))) {
            endTime = nowTime.clone().subtract(1, 'hours').subtract(7, 'minutes')
          }
        } else {
          if (this.$moment(endTime).isSameOrAfter(nowTime.clone().subtract(2, 'hours').subtract(7, 'minutes'))) {
            endTime = nowTime.clone().subtract(2, 'hours').subtract(7, 'minutes')
          }
        }
        picType = '_' + this.changeIndex
      } else {
        picType = '_' + this.changeIndex
      }
      let swiperSlidesList = []
      let suffix = ''
      if (this.pm !== 'pm10') {
        suffix = '_' + this.pm
      }
      if (this.changeIndex == 'minute') {
        let minute = startTime.minute()
        let roundMinute = 5 * Math.ceil(startTime.minute() / 5)
        startTime = startTime.add(roundMinute - minute, 'minutes')
        for (let i = 0; startTime <= endTime; ++i) {
          swiperSlidesList.push({
            value: i,
            addr:
              startTime.format('YYYY/MM/DD/YYYYMMDDHHmm00') +
              picType +
              suffix +
              '_raster.csv',
            label: startTime.format('YYYY-MM-DD HH:mm:00')
          })
          startTime = startTime.add(5, interval)
        }
      } else {
        let foramt = this.getTimeLabelFormat(interval)
        for (let i = 0; startTime <= endTime; ++i) {
          swiperSlidesList.push({
            value: i,
            addr:
              startTime.format('YYYY/MM/DD/YYYYMMDDHH0000') +
              picType +
              suffix +
              '_raster.csv',
            label: startTime.format(foramt)
          })
          startTime = startTime.add(1, interval)
        }
      }

      return swiperSlidesList
    },
    getSortTimeLoadDataList(loadData) {
      // 加载生成记录的数据
      // 获取 数据地址的list
      clearInterval(this.intervalSwitch)
      this.swiperSwitch = false
      // 获取时间段内 所有的文件列表
      this.swiperSlides = []

      let startTime = this.$moment(loadData.start_time)
      let endTime = this.$moment(loadData.end_time)
      let interval = loadData.type + 's'
      let picType = '_' + loadData.type
      // 禁止自动计算颜色
      this.calcColor = true
      this.colorMin = loadData.color_min // 滑块最小值
      this.colorMax = loadData.color_max // 滑块最大值

      let swiperSlidesList = []
      let suffix = ''
      if (this.pm !== 'pm10') {
        suffix = '_' + this.pm
      }
      for (let i = 0; startTime <= endTime; ++i) {
        swiperSlidesList.push({
          value: i,
          addr:
            startTime.format('YYYY/MM/DD/') +
            loadData.id +
            '_' +
            startTime.format('YYYYMMDDHHmm00') +
            picType +
            suffix +
            '_raster.csv',
          label: startTime.format('YYYY-MM-DD HH:mm:00')
        })
        startTime = startTime.add(1, interval)
      }

      this.swiperSlides = swiperSlidesList
      if (this.swiperSlides.length > 0) {
        this.swiperValue = this.swiperSlides[0].value
        setTimeout(() => {
          this.toSlide(0)
        }, 1)
        this.drawSmallCanas()
      }
    },
    getSortTimeList(checkValue, check) {
      // 获取 数据地址的list
      clearInterval(this.intervalSwitch)
      this.swiperSwitch = false
      // 获取时间段内 所有的文件列表
      this.swiperSlides = []

      let swiperSlidesList = this.getSwiperSlidesList()
      this.swiperSlides = swiperSlidesList
      if (this.swiperSlides.length > 0) {
        this.swiperValue = this.swiperSlides[0].value
        this.toSlide(0, true)
      }
    },
    drawSmallCanas(dataNeed) {
      // 绘制小canvas
      if (document.getElementById('canvas-small-0') === null) {
        setTimeout(() => {
          this.drawSmallCanas()
        }, 10)
      } else {
        for (let index in this.swiperSlides) {
          setTimeout(() => {
            this.queueDrawSmallCanas(index)
          }, 1)
        }
      }
    },
    queueDrawSmallCanas(index) {
      let silde = this.swiperSlides[index]
      let id = 'canvas-small-' + silde['value']
      let canvasIn = document.getElementById(id)
      let context = canvasIn.getContext('2d')
      if (!!silde['data']) {
        this.drawCanvas(1, canvasIn, silde['data'])
      } else {
        this.getCsvData(1, canvasIn, silde['addr'], index)
      }
    },
    clearCanvas(canvasIn) {
      let canvas = canvasIn ? canvasIn : this.canvas
      canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    },
    drawCanvas(drawType, canvasIn, canvasCsvDataIn, plan) {
      canvasIn = !!canvasIn ? canvasIn : this.canvas
      this.clearCanvas(canvasIn)
      let drawData = !!canvasCsvDataIn
        ? canvasCsvDataIn
        : this.canvasCsvData
      if (
        drawData === undefined ||
        drawData === null ||
        drawData.length === 0
      ) {
        return
      }
      // 颜色映射
      let palette = this.paletteD
      let { width, height } = canvasIn
      let index = 0
      let rh = parseFloat(drawData[2][1])
      let rw = parseFloat(drawData[1][1])
      let min = this.colorMin
      let max = this.colorMax
      if (drawType === 2) {
        let colorPlan = this.getPlanParams(plan)
        min = colorPlan['colorMin']
        max = colorPlan['colorMax']
      }
      let newCanvas = document.createElement('canvas')
      newCanvas.width = rw
      newCanvas.height = rh
      let imageData = newCanvas
        .getContext('2d')
        .getImageData(0, 0, rw, rh)
      let data = imageData.data
      for (let i = 5; i < drawData.length - 1; i++) {
        let alpha = this.getWidthBucket(
          parseFloat(drawData[i][1]),
          min,
          max,
          700
        )
        let color = palette.pickColor(alpha)
        let index = (parseInt(drawData[i][0]) + 1) * 4 - 1
        data[index - 3] = color[0]
        data[index - 2] = color[1]
        data[index - 1] = color[2]
        data[index] = 255
      }
      newCanvas.getContext('2d').putImageData(imageData, 0, 0)
      this.scalePic(newCanvas, canvasIn)
    },
    scalePic(newCanvas, canvasIn) {
      // 绘制canvas
      // 调整大小 适配 底图
      if (this.region == 'JnJz') {
        canvasIn
          .getContext('2d')
          .drawImage(
            newCanvas,
            canvasIn.width * 0,
            canvasIn.height * 0.057,
            canvasIn.width * 1,
            canvasIn.height * 0.8845
          )
      } else if (this.region == 'JnJz_zb') {
        canvasIn
          .getContext('2d')
          .drawImage(
            newCanvas,
            canvasIn.width * 0,
            canvasIn.height * 0,
            canvasIn.width * 1,
            canvasIn.height * 1
          )
      } else if (this.region == 'sd_all') {
        canvasIn
          .getContext('2d')
          .drawImage(
            newCanvas,
            canvasIn.width * 0.0028,
            canvasIn.height * 0.2185,
            canvasIn.width * 1,
            canvasIn.height * 0.6245
          )
      }
    },
    // 创建渐变色条
    createPalette() {
      let colorStops = {
        0: '#67ce0b',
        0.15: '#f2d62d',
        0.3: '#fa8a04',
        0.45: '#f80302',
        0.6: '#cf0000',
        0.75: '#970454',
        0.9: '#5f021d',
        1: '#4d120a'
      }
      let width = 16,
        height = 320
      // 创建canvas
      let palatteCanvas = document.getElementById('palatteCanvas')
      let ctx = palatteCanvas.getContext('2d')

      // 创建线性渐变色
      let linearGradient = ctx.createLinearGradient(0, 0, 0, height)
      for (const key in colorStops) {
        linearGradient.addColorStop(key, colorStops[key])
      }
      // 绘制渐变色条
      ctx.fillStyle = linearGradient
      ctx.fillRect(0, 0, width, height)

      // 读取像素值
      let imageData = ctx.getImageData(0, 0, 2.5, height).data
      return {
        canvas: palatteCanvas,
        pickColor: function(position) {
          return imageData.slice(position * 4, position * 4 + 3)
        }
      }
    },
    // 取色函数
    getWidthBucket(num, min, max, count) {
      if (num > max) {
        return count + 1
      }
      if (num < min) {
        return 0
      }
      let spac = (max - min) / count
      let buckt_rank = parseInt((num - min) / spac)
      return buckt_rank
    },
    // 开始播放
    videoPlay() {
      // this.swiperValue = 0;
      this.swiperSwitch = true
      if (this.swiperSwitch) {
        this.intervalSwitch = setInterval(() => {
          this.toSlide(++this.swiperValue)
        }, 1000)
      } else {
        clearInterval(this.intervalSwitch)
      }
    },
    // 结束播放
    videoStop() {
      this.swiperSwitch = false
      clearInterval(this.intervalSwitch)
    },
    // 保存事件
    saveEvent() {
      this.$prompt('请输入事件名称', '保存事件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const run = async () => {
          let message = {
            // time:,
            name: this.changeIndex,
            type: 'png',
            color_max: this.colorMax,
            color_min: this.colorMin
          }
          const data = await this.$post(
            'http://kring-custom-manage.it.czczh.cn/manage/save_plan/'
          )
        }
        this.$message({
          type: 'success',
          message: '已保存事件'
        })
      })
    },
    checkParams() {
      let res = {
        status: true
      }
      if (!this.timeSoltValue[0]) {
        res['status'] = false
        res['msg'] = '查询时间不能为空'
        return res
      }
      if (this.$moment(this.timeSoltValue[0]) > this.$moment().subtract(20, 'minutes')) {
        res['status'] = false
        res['msg'] = '当前时间插值图未生成，重新选择时间'
        return res
      }
      return res
    },
    // 查询
    pushNewKring() {
      this.queryLoading = true
      this.regionClickQuery = this.region
      let check = this.checkParams()
      if (check.status) {
        this.swiperValue = 0
        this.getSortTimeList()
      } else {
        this.$message({
          type: 'warning',
          message: check.msg
        })
        this.queryLoading = false
      }
    },
    // 生成新的数据
    generateNewKring() {
      this.dialogVisible = true
      this.reportName = ''
    },

    selectedSwiperPic(index) {
      // 选择小图
      if (document.getElementById('canvas-small-0') === null) {
        setTimeout(() => {
          this.selectedSwiperPic(index)
        }, 10)
      } else {
        for (let i = 0; i < this.swiperSlides.length; ++i) {
          document.getElementById('canvas-small-' + i).className =
            'canvas-small'
        }
        document.getElementById('canvas-small-' + index).className =
          'selected-swiper-pic'
      }
    },

    toSlide(index, current) {
      if (this.queryLoading && !current) {
        return
      }
      // 改变当前大图的数据
      if (index < 0) {
        index = this.swiperSlides.length - 1
      }
      if (index >= this.swiperSlides.length) {
        index = 0
      }
      setTimeout(() => {
        this.selectedSwiperPic(index)
      }, 10)
      this.swiperValue = index
      this.canvasCsvData = this.swiperSlides[index]['data']
      this.swiperValueAddr = this.swiperSlides[index].addr
      this.swiperValueLabel = this.swiperSlides[index].label
      if (!!this.swiperSlides[index]['data']) {
        this.drawCanvas(
          0,
          null,
          this.swiperSlides[index]['data'],
          index
        )
        // this.drawPlanCanvas()
      } else {
        this.getCsvData(0)
      }
    },
    // 查询取csv数据方法
    getCsvData(drawType, canvasIn, urlIn, index) {
      let url = !!urlIn ? urlIn : this.swiperValueAddr
      // console.log("getCsvData -> url", url)
      let suffix = ''
      if (this.region == 'JnJz') {
        this.underGraph = this.bg_pic
        suffix = 'jinan_jiezhen/'
      } else if (this.region == 'JnJz_zb') {
        this.underGraph = this.bg_zb_pic
        suffix = 'jinan_jiezhen/zhoubian/'
      } else if (this.region == 'sd_all') {
        this.underGraph = this.bg_sd_pic
        suffix = 'shandong/'
      }
      this.$papa.parse(this.ossBaseUrl + suffix + url, {
        download: true, //
        complete: results => {
          //csv分析结束要执行的函数，除了complete还可以加before，error等情况的分析函数
          let data = results.data
          if (!!data && data.length > 0 && data[0].length > 1) {
            if (drawType === 0) {
              this.canvasCsvData = data
              if (this.calcColor) {
                this.calcColor = false
              } else {
                if (!this.isShowConfig || !this.configTableList.length) {
                  this.colorMin = parseInt(data[4][1])
                  this.colorMax = parseInt(data[3][1] * 2.5) + 1
                }
              }
              index = 0
            }
            if (!!this.swiperSlides[index]) {
              this.swiperSlides[index]['data'] = data
              this.swiperSlides[index]['colorMin'] = parseInt(
                data[4][1]
              )
              this.swiperSlides[index]['colorMax'] =
                parseInt(data[3][1] * 2.5) + 1
              this.drawCanvas(drawType, canvasIn, data)
              if (drawType === 0) {
                this.drawSmallCanas()
              }
            } else {
              return true
            }
          } else {
            // csv数据获取错误
          }
          if (parseInt(index) === this.swiperSlides.length - 1) {
            this.queryLoading = false
          }
        },
        error: err => {
          // this.colorMin = 1
          // this.colorMax = 700
          if (index === this.swiperSlides.length - 1 + '') {
            this.queryLoading = false
          }
          this.drawCanvas(drawType, canvasIn, [])
          if (drawType === 0) {
            this.drawSmallCanas()
            this.queryLoading = false
            // this.$alert('数据未找到', '提示', {
            //     confirmButtonText: '确定',
            //     callback: action => {
            //         // location.reload()
            //     }
            // })
          }
        }
      })
    },
    compositePic(canvasIn) {
      // 将图片绘制到canvas上
      let image = document.getElementById('bg-pic')
      let canvas = canvasIn ? canvasIn : this.canvas
      canvas
        .getContext('2d')
        .drawImage(image, 0, 0, canvas.width, canvas.height)
    },
    checkDetailsView() {
      // 查看 大图详情
      let url =
        '/DetailsView?colorMax=' +
        this.colorMax +
        '&colorMin=' +
        this.colorMin +
        '&picPath=' +
        this.swiperValueAddr
      let whValues = []
      let bgPic = ''
      let prefix = ''
      if (this.region == 'JnJz') {
        whValues = [0, 0.057, 1, 0.8845]
        bgPic = 'bg_jnjz'
        prefix = 'jinan_jiezhen'
      } else if (this.region == 'JnJz_zb') {
        whValues = [0, 0, 1, 1]
        bgPic = 'bg_jnjz_zb_clip'
        prefix = 'jinan_jiezhen/zhoubian'
      } else if (this.region == 'sd_all') {
        whValues = [0.0028, 0.2185, 1, 0.6245]
        bgPic = 'bg_sd'
        prefix = 'shandong'
      }
      let routeUrl = this.$router.resolve({
        path: 'DetailsView',
        query: {
          colorMax: this.colorMax,
          colorMin: this.colorMin,
          prefix: prefix,
          picPath: this.swiperValueAddr,
          whValues: whValues.join(','),
          bgPic: bgPic,
          region: this.region
        }
      })
      console.log('checkDetailsView -> routeUrl', routeUrl)

      window.open(routeUrl.href, '_blank')
    },
    updateCanvas() {
      this.videoStop()
      this.drawCanvas(0)
      this.drawSmallCanas()
    }
  },
}
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
  display: none;
}
/deep/ .el-tabs__header {
  padding: 0 20px;
}
/deep/ .el-date-editor .el-range-separator {
  width: 8% !important;
}
.active {
  background: #e6f7ff;
  border-bottom: 2px solid #e6f7ff;
}
.box {
  padding: 0px 20px;
  // background: url("../../assets/bg/map0.png") no-repeat;
  // background-size: 100%;
  box-sizing: border-box;
  display: flex;
  // align-items: center;
  position: relative;
  width: 100%;
  .left {
    width: 640px;
    height: 750px;
    margin-top: 20px;
    background: rgba(252, 252, 252, 1);
    box-shadow: 0px 4px 12px 0px rgba(64, 125, 193, 0.33);
    border-radius: 10px;
    padding: 10px 0 20px;
    box-sizing: border-box;
    // overflow: hidden;
    .container {
      padding: 0 20px;
      box-sizing: border-box;
    }
    .top {
      display: flex;
      align-items: center;
    }
    .selectTime {
      margin-left: 20px;
    }
    .confirm_bottom {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .number {
        padding-top: 20px;
        color: #b6b6b6;
      }
    }
    .confirm {
      width: 82px;
      height: 32px;
      font-size: 12px;
      margin-left: 80px;
      line-height: 1px;
      margin-top: 10px;
    }
    .confirm2 {
      width: 82px;
      height: 32px;
      font-size: 12px;
      line-height: 1px;
      margin-left: -135px;
      margin-top: 10px;
    }
  }
}
span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  display: inline-block;
  width: 80px;
}
.middle {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
/deep/ .el-slider.is-vertical.el-slider--with-input .el-slider__input {
  margin-left: -18px !important;
}
/deep/ .el-tabs__content {
  width: 640px;
}
.ul {
  height: 660px;
  overflow: scroll;
  width: 640px;
  li {
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    height: 80px;
    .boxs {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 80px;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    .recordListleft {
      font-size: 18px;
      font-weight: bold;
      height: 80px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      color: rgba(64, 68, 80, 1);
      .title {
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
        line-height: 13px;
      }
      span {
        margin-left: 10px;
        color: #999;
      }
      .time {
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        margin-top: 1px;
      }
    }
    .recordListright {
      padding-top: 30px;
      box-sizing: border-box;
      width: 300px;
      height: 80px;
      .icon_box {
        margin-top: 10px;
        width: 100%;
        text-align: right;
        i {
          margin-right: 5px;
          color: #349dff;
          font-size: 13px;
        }
        span {
          color: #349dff;
          cursor: pointer;
          margin-right: 10px;
        }
      }
    }
  }
}
/deep/ .el-progress__text {
  margin-left: 10px;
}
.active_kring {
  border-radius: 4px;
  border: 2px solid rgba(24, 144, 255, 1);
}
.kring-img-all {
  margin-top: 10px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  height: 500px;
  align-content: flex-start;
  .kring_group {
    width: 145px;
    height: 145px;
    display: flex;
    margin-left: 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .time {
      position: absolute;
      bottom: 0;
      font-size: 10px;
      color: #999;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .img_item {
    width: 135px;
    position: relative;
    height: 135px;
    img {
      width: 135px;
      height: 135px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .img_index {
      position: absolute;
      left: 5px;
      top: 5px;
      color: rgba(138, 143, 150, 1);
    }
  }
  .img_item_other {
    width: 120px;
    position: relative;
    height: 98px;
    img {
      width: 120px;
      height: 98px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .img_index {
      position: absolute;
      left: 5px;
      top: 5px;
      color: rgba(138, 143, 150, 1);
    }
  }
}
.right {
  .header {
    display: flex;
    align-items: center;
    .bigCanvas {
      width: 702px;
      position: relative;
      canvase {
        position: absolute;
        top: 0;
        left: 0;
      }
      img {
        width: 702px;
        height: 702px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .button_box {
      width: 60px;
      height: 60px;
    }
    .button {
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      margin: 0 40px;
      cursor: pointer;
      border-radius: 50%;
      background: rgba(255, 255, 255, 1);
      transition: 0.1s;
      box-shadow: 0px 4px 20px 0px rgba(98, 131, 236, 0.06);
      i {
        color: #1890ff;
        font-size: 16px;
      }
    }
    .button:hover {
      transform: scale(1.2);
    }
  }
  .underBottom {
    display: flex;
    align-items: center;
    margin-top: 40px;
    margin-left: 180px;
    .slide {
      display: flex;
      align-items: center;
      width: 460px;
      height: 40px;
      background: rgba(252, 252, 252, 1);
      box-shadow: 0px 2px 8px 0px rgba(14, 77, 167, 0.08);
      padding: 0 20px;
      box-sizing: border-box;
      border-radius: 4px;
      .slide_item {
        font-size: 14px;
        color: rgba(114, 120, 137, 1);
        background: rgba(252, 252, 252, 1);
        margin-left: 16px;
      }
      .icon_stop {
        font-size: 24px;
        color: #1890ff;
        margin-left: 16px;
        cursor: pointer;
      }
    }
    .save_button {
      width: 86px;
      height: 32px;
      background: rgba(24, 144, 255, 1);
      box-shadow: 0px 2px 8px 0px rgba(35, 105, 205, 0.24),
        0px 2px 8px 0px rgba(69, 136, 209, 0.19);
      border-radius: 2px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 32px;
      text-align: center;
      margin-left: 24px;
      cursor: pointer;
    }
    .share {
      display: flex;
      align-items: center;
      margin-left: 24px;
      cursor: pointer;
      i {
        font-size: 24px;
        color: rgba(24, 144, 255, 1);
      }
      div {
        font-size: 16px;
        font-weight: 400;
        color: #999;
        margin-left: 5px;
      }
    }
  }
  .color_box {
    position: relative;
    top: 42px;
    right: 12px;
    .color_slide {
      width: 100%;
      background: rgba(252, 252, 252, 1);
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      margin-top: 10px;
      .slide_item {
        // padding: 10px 0;
        background: rgba(252, 252, 252, 1);
      }
    }
    .color_tap {
      width: 40px;
      height: 25px;
      margin: 0 auto;
      background: rgba(252, 252, 252, 1);
      box-shadow: 0px 2px 8px 0px rgba(14, 77, 167, 0.08);
      border-radius: 4px;
      padding: 0 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      canvas {
        margin-top: 10px;
        transform: rotate(180deg);
        -ms-transform: rotate(180deg); /* IE 9 */
        -moz-transform: rotate(180deg); /* Firefox */
        -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
        -o-transform: rotate(180deg); /* Opera */
      }
      i {
        font-style: normal;
        font-weight: 400;
        color: rgba(94, 94, 94, 1);
        cursor: pointer;
      }
    }
  }
}

/deep/ .config-table .ant-table-scroll .ant-table-body {
  overflow-y: auto !important;
}

.edit-ok-icon {
  color: green;
  font-size: 24px;
  padding: 0px 4px;
  line-height: 32px;
  vertical-align: bottom;
}
.edit-cancel-icon {
  color: red;
  font-size: 24px;
  padding: 0px 4px;
  line-height: 32px;
  vertical-align: bottom;
}
.add-tip {
  font-size: 16px;
  color: #ff7e00;
}
.setting-btn {
  margin-left: 20px;
  border: 1px solid #cdd3ec;
  width: 40px;
}
</style>